<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.min.js-->
    <script src="vue.min.js"></script>
</head>
<body>

<!--定义表示范围 id可以随意指定-->
<div id="app">

</div>

</body>
<script>
    //##创建 vue实例
    new Vue({
        el:'#app',//##绑定标识范围
        data:{//##定义变量,并进行初始化
            message:'双向绑定能够影响变量值'
        },
        methods:{//##定义函数
            query(){
                console.log("查询方法")
            }
        },
        created(){//created()是vue生命周期中自带的一个方法,在执行这个方法后,data和methods已经初始化
            debugger//进行debug,右键检擦-调试器能进行调试
            console.log("页面尚未进行渲染,但数据已经准备好了")
        },
        mounted(){//mounted()是vue生命周期中自带的一个方法,在这个方法执行后,数据将进行渲染进入页面
            console.log("页面进行渲染")
        }
    })
</script>
</html>